<template>
  <div class="container">
    <div class="sidebar-container">
      <!-- 左侧导航栏 -->
      <el-menu
          :default-active="activeMenu"
          :default-openeds="openedMenus"
          router
          class="el-menu-vertical-demo"
          background-color="#28394b"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleMenuSelect"
      >
        <!-- 渲染树形结构的菜单 -->
        <template v-for="(module) in treeMenu">
          <template v-if="module.children && module.children.length > 0">
            <el-submenu :index="module.module_id.toString()" :key="module.module_id.toString()">
              <template v-slot:title>
                <i :class="module.module_icon"></i>
                {{ module.module_name }}
              </template>
              <el-menu-item v-for="(child) in module.children" :index="child.module_url" :key="child.module_id.toString()">
                <i :class="child.module_icon"></i>
                {{ child.module_name }}
              </el-menu-item>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="module.module_url" :key="module.module_id.toString()">
              <i :class="module.module_icon"></i>
              {{ module.module_name }}
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>

    <!-- 右侧内容区域 -->
    <div class="main-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ModuleView',
  data() {
    return {
      activeMenu: '1', // 默认选中的菜单为首页
      treeMenu: [],
      openedMenus: []
    };
  },
  created() {
    // 在组件创建时调用方法来获取树形菜单数据
    this.fetchTreeMenu();
  },
  methods: {
    // 菜单选择事件处理程序
    handleMenuSelect(index) {
      this.activeMenu = index;
    },
    fetchTreeMenu() {
      this.$http.get('system/getModules')
          .then(response => {
            this.treeMenu = response.data.data;
            // 将所有父菜单索引添加到openedMenus
            this.openedMenus = this.treeMenu.map(menu => menu.module_id.toString());
          })
          .catch(error => {
            console.error('Error fetching tree menu:', error);
          });
    },
  }
};
</script>

<style scoped>
.container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 将子项间的间距平均分配 */
  align-items: stretch; /* 子项垂直方向拉伸填充父容器 */
}

.el-menu-vertical-demo {
  width: 200px; /* 左侧导航栏固定宽度 */
  background-color: #28394b; /* 设置左侧导航栏背景颜色 */
  height: 100vh; /* 将高度设置为100%以填充整个容器 */
}

.main-container {
  flex: 1; /* 右侧内容区域占据剩余空间 */
  padding: 20px;
}

</style>
